<template>
  <page-wrap title="AI面评" back hideTab stayStill contentWrapColor="#FFFFFF">
    <view class="main-container" :style="{ backgroundImage: 'url(' + srcQrCodeBg + ')' }">

      <view class="image-qrcode-text-container">
        <image :src="srcQrCodeText" class="image-qrcode-text"></image>
      </view>

      <view class="qrCodeContainer">
        <view class="qrCodeImageContainer">
          <image :src="srcQrCode" class="qrCodeImage" @click="clickQrCode"></image>
          <image :src="srcQrCodeSuccess" v-if="isSuccess" class="qrCodeImageSuccess" @click="clickQrCode"></image>
          <image :src="srcQrCodeExpire" v-if="isExpire" class="qrCodeImageExpire" @click="clickQrCode"></image>
          <view v-if="isSuccess" class="login-text-success">{{ loginText }}</view>
          <view v-if="isExpire" class="login-text-expire">{{ loginText }}</view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>
<script>
import { getLoginQr, checkLoginQr } from "@/api/index.js";
export default {
  data() {
    return {
      srcQrCode: "",
      srcQrCodeBg: this.$imgBaseSelf + "career/ai_interview_qr_code_bg.png",
      srcQrCodeText:
        this.$imgBaseSelf + "career/ai_interview_qr_code_text_new.png",
      srcQrCodeExpire:
        this.$imgBaseSelf + "career/ai_interview_qr_code_expire.png",
      srcQrCodeSuccess:
        this.$imgBaseSelf + "career/ai_interview_qr_code_login_success.png",
      ticket: "",
      isSuccess: false,
      isExpire: false,
      destroyed: false,
      loginText: "登陆成功",
    };
  },
  onLoad() {},
  created() {
    this.getQrCode();
    this.loopCheckQrCode();
  },
  destroyed() {
    this.destroyed = true;
  },
  methods: {
    getQrCode() {
      let params = {
        path: "pagesSub/public/loginPc/index",
        from: "ai",
      };
      getLoginQr(params)
        .then((res) => {
          if (res.code == 200) {
            // console.log(res.data);
            this.srcQrCode = res.data.imgBase64;
            this.ticket = res.data.ticket;
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .finally(() => {});
    },
    loopCheckQrCode() {
      setInterval(() => {
        if (!this.isSuccess && !this.isExpire && !this.destroyed) {
          this.checkQrCode();
        }
      }, 2000);
    },
    checkQrCode() {
      let params = {
        ticket: this.ticket,
      };
      checkLoginQr(params)
        .then((res) => {
          if (res.code == 200) {
            // console.log(res.data);
            this.isSuccess = res.data.success;
            this.isExpire = res.data.isExpire;

            // this.isSuccess = true;
            // res.data.personId = "19588155";

            // this.isExpire = true;

            if (this.isExpire) {
              this.loginText = "二维码过期";
              console.log("二维码失效");
            } else if (!this.isSuccess) {
              console.log("等待扫码登录");
            } else if (this.isSuccess) {
              this.loginText = "登录成功";
              console.log("登录成功");
              uni.setStorageSync("person-id", "id" + res.data.personId);
              uni.navigateTo({
                url:
                  "/pagesSub/companyCenter/interviewAI/majorSearchAI?from=zhadui&personId=" +
                  res.data.personId,
              });

              this.getQrCode();
              this.isSuccess = false;
              this.isExpire = false;
            }
          }
        })
        .finally(() => {});
    },
    clickQrCode() {
      console.log("点击二维码", this.isExpire, this.isSuccess);
      if (this.isExpire || this.isSuccess) {
        console.log("刷新二维码");
        this.getQrCode();
        this.isSuccess = false;
        this.isExpire = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.main-container {
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .image-bg {
    width: 100%;
    height: 1448rpx;
    position: fixed;
    left: 0;
    top: 0;
  }

  .image-qrcode-text-container {
    display: flex;
    margin-top: 50rpx;
    justify-content: center;

    .image-qrcode-text {
      width: 630rpx;
      height: 654rpx;
    }
  }
}

.qrCodeContainer {
  margin-top: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .qrCodeImageContainer {
    margin-top: 40rpx;
    display: flex;
    justify-content: center;

    .qrCodeImage {
      width: 280rpx;
      height: 280rpx;
    }

    .qrCodeImageSuccess {
      position: absolute;
      width: 280rpx;
      height: 280rpx;
    }

    .qrCodeImageExpire {
      position: absolute;
      width: 280rpx;
      height: 280rpx;
    }

    .login-text-success {
      margin-top: 174rpx;
      color: #333333;
      font-size: 28rpx;
      position: absolute;
    }

    .login-text-expire {
      margin-top: 116rpx;
      color: #333333;
      font-size: 28rpx;
      position: absolute;
    }
  }
}
</style>